<template>
	<view class="content">
		<view class="searchBox">
			<view class="search">
				<input type="text" v-model="phone" class="inp" placeholder="输入手机号查询">
				<view class="btn">
					<image src="../../static/image/search.png" @click="getList('')" class="icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="screenBox">
			<view class="navBox">
				<view :class="current==0?'navItems':'navItem'" @click="current=0">
					快递
					<image v-show="current==0" src="../../static/image/choose.png" class="choose" mode=""></image>
				</view>
				<view :class="current==1?'navItems':'navItem'" @click="current=1">
					同城
					<image v-show="current==1" src="../../static/image/choose.png" class="choose" mode=""></image>
				</view>
				<view :class="current==2?'navItems':'navItem'" @click="current=2">
					海外
					<image v-show="current==2" src="../../static/image/choose.png" class="choose" mode=""></image>
				</view>
			</view>
			<view class="screenBtn" @click="chooseShow=true">
				筛选
				<u-icon name="arrow-down-fill" style="margin-left: 12rpx;"></u-icon>
			</view>
		</view>
		<view class="line"></view>
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="true" active-color="#1AA261" bg-color="rgba(0,0,0,0)" :current="tabCurrent" @change="change"></u-tabs>
		</view>
		<view class="orderList" style="padding-bottom: 200rpx;">
			<view style="height:600rpx;" v-if="dataList.length==0">
				<u-empty text="暂无信息" mode="order"></u-empty>
			</view>
			<view class="orderItem" v-else v-for="(item,index) in dataList" @click="goInfo((item.pay_status=='no_need'||item.pay_status=='paid')&&item.yida.delivery_id?`/pages-send/orderTrajectory/orderTrajectory?id=${item.id}`:`/pages-send/orderInfo/orderInfo?id=${item.id}`)">
				<view class="top">
					<view class="left">
						<view v-if="item.pay_status=='no_need'||item.pay_status=='paid'">
							<image src="../../static/image/dls.png" class="type-icon" mode="" v-if="item.status=='uncollected'"></image>
							<image src="../../static/image/ysz.png" class="type-icon" mode="" v-if="item.status=='collected'||item.status=='shipped'"></image>
							<image src="../../static/image/yqs.png" class="type-icon" mode="" v-if="item.status=='received'"></image>
							<image src="../../static/image/yqx.png" class="type-icon" mode="" v-if="item.status=='canceled'||item.status=='abnormal'"></image>
						</view>
						<image src="../../static/image/wzf.png" class="type-icon" mode="" v-if="item.pay_status=='unpaid'"></image>
						<image src="../../static/image/dbd.png" class="type-icon" mode="" v-if="item.pay_status=='supplementary'"></image>
						<view class="dh">
							<view class="text">运单号</view>
							<view class="ID">
								{{item.yida.delivery_id||item.order_no}}
								<image src="../../static/image/copy.png" @click.stop="copyBtn(item.yida.delivery_id||item.order_no)" class="copy" mode=""></image>
							</view>
						</view>
					</view>
					<view class="right">
						<view v-if="item.pay_status=='no_need'||item.pay_status=='paid'">
							<view class="status" v-if="item.status=='uncollected'" style="color: #F1AC3D;">待取件</view>
							<view class="status" v-if="item.status=='collected'" style="color: #1AA261;">已取件</view>
							<view class="status" v-if="item.status=='shipped'" style="color: #1AA261;">运输中</view>
							<view class="status" v-if="item.status=='received'">已签收</view>
							<view class="status" v-if="item.status=='canceled'">已取消</view>
							<view class="status" v-if="item.status=='abnormal'">异常状态</view>
						</view>
						<view v-if="item.pay_status=='unpaid'">
							<view class="status" v-if="item.status=='canceled'">已取消</view>
							<view class="status" v-else>未支付</view>
						</view>
						<view class="status" v-if="item.pay_status=='supplementary'" style="color:#BF2C1F;">待补单</view>
						<view class="price">￥{{item.total_price}}</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="bottom">
					<view class="left">
						<view class="time">{{item.pickup_start_time}}</view>
						<view class="name">{{item.send_address.province}}，{{item.send_address.name}}</view>
					</view>
					<image src="../../static/image/left.png" class="left-icon" mode=""></image>
					<view class="right">
						<view class="time">{{item.pickup_end_time}}</view>
						<view class="name">{{item.receive_address.province}}，{{item.receive_address.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 筛选 -->
		<u-popup v-model="chooseShow" mode="top">
			<view class="popup">
				<view class="searchBox">
					<view class="search">
						<input type="text" class="inp" placeholder="输入手机号和运单号查询">
						<view class="btn">
							<image src="../../static/image/search.png" class="icon" mode=""></image>
						</view>
					</view>
				</view>
				<view class="screenBox">
					<view class="navBox">
						<view :class="current==0?'navItems':'navItem'" @click="current=0">
							快递
							<image v-show="current==0" src="../../static/image/choose.png" class="choose" mode=""></image>
						</view>
						<view :class="current==1?'navItems':'navItem'" @click="current=1">
							同城
							<image v-show="current==1" src="../../static/image/choose.png" class="choose" mode=""></image>
						</view>
						<view :class="current==2?'navItems':'navItem'" @click="current=2">
							海外
							<image v-show="current==2" src="../../static/image/choose.png" class="choose" mode=""></image>
						</view>
					</view>
					<view class="screenBtn" @click="chooseShow=false">
						筛选
						<u-icon name="arrow-up-fill" style="margin-left: 12rpx;"></u-icon>
					</view>
				</view>
				<view class="searchBoxs">
					<view class="title">下单时间</view>
					<u-radio-group v-model="time" @change="radioGroupChange">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in timelist" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
							active-color="#fff"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view class="title" style="margin-top: 52rpx;">快递类型</view>
					<u-radio-group v-model="delivery_type">
						<u-radio 
							v-for="(item, index) in deliverylist" :key="index" 
							:name="item.type"
							active-color="#fff"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view class="btns">
						<view class="btn" @click="searchEnter">确认</view>
						<view class="btn2" @click="resetBtn">重置</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 导航栏 -->
		<tabbar link="/pages/order/order"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
	import {orderList,expressList} from '../../common/api.js'
	export default {
		components:{tabbar},
		data() {
			return {
				current:0,
				list: [{
					name: '全部',
					type:''
				}, {
					name: '待取件',
					type:'uncollected'
				}, {
					name: '已取件',
					type:'collected'
				}, {
					name: '运输中',
					type: 'shipped'
				}, {
					name: '运输中',
					type:'received'
				}, {
					name: '已取消',
					type:'canceled'
				}, {
					name: '异常状态',
					type:'abnormal'
				}],
				tabCurrent: 0,
				
				chooseShow:false,
				
				dataList:[],
				
				timelist:[
					{
						name: '近一周',
						disabled: false
					},
					{
						name: '近一个月',
						disabled: false
					},
					{
						name: '近三个月',
						disabled: false
					},{
						name: '近半年',
						disabled: false
					}
				],
				time:'',
				timeType:'',
				deliverylist:[],
				delivery_type:'',
				
				phone:''
			}
		},
		onShow() {
			this.getList()
			this.getexpressList()
		},
		methods: {
			getexpressList(){
				expressList({}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.deliverylist = res.data
					}
				})
			},
			getList(status){
				orderList({
					status:status,
					time:this.timeType,
					delivery_type:this.delivery_type,
					phone:this.phone
				}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.dataList = res.data.list
					}
				})
			},
			change(index) {
				this.tabCurrent = index;
				this.getList(this.list[index].type)
			},
			goInfo(url){
				uni.navigateTo({
					url:url
				})
			},
			searchEnter(){
				console.log(this.timeType,this.time,this.delivery_type)
				this.getList('')
				this.chooseShow=false
			},
			resetBtn(){
				this.timeType=''
				this.time=''
				this.delivery_type=''
				this.chooseShow=false
				this.getList('')
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				if(e=='近一周'){
					this.timeType='week'
				}else if(e=='近一个月'){
					this.timeType='month'
				}else if(e=='近三个月'){
					this.timeType='3month'
				}else if(e=='近半年'){
					this.timeType='6month'
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			copyBtn(num){
				uni.setClipboardData({
					data: num,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>
<style>
	page{
		background: #EDEFF2;
	}
</style>
<style scoped lang="scss">
.content{
	width: 750rpx;
	.searchBoxs{
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 32rpx;
		}
		.btns{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 50rpx;
			.btn{
				width: 330rpx;
				height: 88rpx;
				background: #1AA261;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
			}
			.btn2{
				width: 330rpx;
				height: 88rpx;
				border:1rpx solid #1AA261;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #1AA261;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
	.searchBox{
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		.search{
			width: 100%;
			height: 80rpx;
			background: #EDEFF2;
			border-radius: 50rpx;
			padding:0 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.inp{
				width: calc(100% - 84rpx - 24rpx);
				height: 100%;
				font-size: 24rpx;
			}
			.btn{
				width: 84rpx;
				height: 52rpx;
				background: #1AA261;
				border-radius: 50rpx;
				margin-left: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	.screenBox{
		width: 100%;
		height: 80rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.screenBtn{
			width: 146rpx;
			height: 56rpx;
			background: #EDEFF2;
			border-radius: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			font-style: normal;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			padding-left: 30rpx;
			margin-bottom: 50rpx;
		}
		.navBox{
			width: 70%;
			padding-bottom: 50rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.navItem{
				width: 33.33%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
			}
			.navItems{
				width: 33.33%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1AA261;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				position: relative;
				.choose{
					width: 68rpx;
					height: 41rpx;
					position: absolute;
					bottom: -25rpx;
					right: 20rpx;
				}
			}
			
			
		}
	}

	.line{
		width: 100%;
		height: 28rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -15rpx;
		background: #EDEFF2;
	}

	.orderList{
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		.orderItem{
			width: 100%;
			height: 268rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.xian{
				border-bottom: 1rpx solid #eee;
			}
			.bottom{
				padding:33rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.left,.right{
					.time{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						line-height: 20rpx;
						text-align: left;
						font-style: normal;
					}
					.name{
						margin-top: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.right{
					.time,.name{
						text-align: right;
					}
				}
				.left-icon{
					width: 52rpx;
					height: 14rpx;
				}
				
			}
			.top{
				padding:33rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					.type-icon{
						width: 64rpx;
						height: 64rpx;
					}
					.dh{
						margin-left: 24rpx;
						.text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							text-align: left;
							font-style: normal;
						}
						.ID{
							margin-top: 15rpx;
							font-family: DINAlternate, DINAlternate;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							.copy{
								width: 24rpx;
								height: 24rpx;
								margin-left: 16rpx;
							}
						}
					}
				}
				.right{
					.status{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
						text-align: right;
						font-style: normal;
					}
					.price{
						margin-top: 15rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #BF2C1F;
						line-height: 28rpx;
						text-align: right;
						font-style: normal;

					}
				}
			}
			
		}
	}
}
</style>
